<%--
  Created by IntelliJ IDEA.
  User: polo
  Date: 2018/2/22
  Time: 14:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + " ://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=path%>/resources/layui/css/layui.css" media="all">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!-- 先引入 Vue -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.0.11/lib/index.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>上传多张图片</legend>
</fieldset>

<div class="layui-upload">
    <button type="button" class="layui-btn" id="test2">多图片上传</button>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <div class="layui-upload-list" id="demo2"></div>
    </blockquote>
</div>
<div id="app">
    <el-upload action="<%=path%>/manage/product/upload.do"
               list-type="picture-card"
               ref="upload"
               name="file"
               :on-success="uploadSuccess"
               :on-error="uploadError"
               :before-upload="beforeAvatarUpload"
               :on-preview="handlePictureCardPreview"
               :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" size="tiny">
        <img width="100%" :src="dialogImageUrl" alt>
    </el-dialog>
</div>
<div class="fileList" style="display: none;"></div>

<script type="text/javascript">
    /*
    * 文件上传
    * */
    urls = "";
    var Main = {
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false
            };
        },
        methods: {
            uploadSuccess(response, file, fileList) {
                console.log(response)
                if (response.success === true) {

                } else {
                    this.$message.error('未知错误，上传失败！');
                }
            },
            uploadError() {
                this.$message.error('上传失败，请检查网络！');
            },
            handleRemove(file, fileList) {
                $.ajax({
                    //这里是地址
                    url: '<%=path%>/manage/product/deleteImg.do',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        "file": file.response.data.uri
                    },
                    success: function (data) {
                        console.log(data);
                    }
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            beforeAvatarUpload(file) {
                let supportedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/bmp', 'image/gif'];
                flag = true;
                const isLt2M = file.size / 1024 / 1024 < 4;

                if (supportedTypes.indexOf(file.type) <= 0) {
                    this.$message.error('上传头像图片只能是JPG、JPEG、PNG、BMP、GIF格式!');
                    flag = false;
                }

                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 4MB!');
                }
                return flag && isLt2M;
            }
        }
    }
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app');
</script>

<script src="<%=path%>/resources/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //多图片上传
        upload.render({
            elem: '#test2'
            , url: '<%=path%>/manage/product/upload.do'
            , number: 4
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                });
            }
            , done: function (res, index, upload) {
                console.log(res);
                console.log(index);
                console.log(upload);
                layer.closeAll('loading'); //关闭loading
            }
            , error: function (index, upload) {
                layer.closeAll('loading'); //关闭loading
            }
        });
    });
</script>
</body>
</html>
